<div nz-row style="margin-bottom: 4px;">
    <div nz-col nzSpan="6" style="text-align: left; padding-top: 4px">
        <nz-radio-group [(ngModel)]="state" (ngModelChange)="filterApiList()">
            <label nz-radio-button [nzValue]="null"><span>全部</span></label>
            <label nz-radio-button [nzValue]="0"><span>可导入</span></label>
            <label nz-radio-button [nzValue]="1"><span>可更新</span></label>
            <label nz-radio-button [nzValue]="2"><span>已存在</span></label>
        </nz-radio-group>
    </div>
    <div nz-col nzSpan="3" style="text-align: right; padding-top: 8px">
        搜索：
    </div>
    <div nz-col nzSpan="6" style="padding-top: 4px">
        <input nz-input placeholder="搜索服务名称、方法、路径" [(ngModel)]="keyword" (ngModelChange)="filterApiList()"/>
    </div>
    <div nz-col nzSpan="8" nzOffset="1" style="padding-bottom: 2px;">
        <nz-alert nzType="info" [nzMessage]="selectInfo"></nz-alert>
        <ng-template #selectInfo>
            总共 <span style="font-weight: bold; color: blue;">{{apiList.length}}</span> 项, 已选择 <span style="font-weight: bold; color: blue;">{{allCheckedNumber}}</span> 项.
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-popconfirm nzPlacement="left" style="color:red;" nzTitle="您确认要清空吗?" (nzOnConfirm)="clearChecked()">
                清空选择
            </a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-popconfirm nzPlacement="left" nzTitle="您确认要全选吗?" (nzOnConfirm)="checkedAll()">
                选择所有
            </a>
        </ng-template>
    </div>
</div>
<div class="tab" appCalcTableScrolly offsetTop="362" [showShadow]="false"
     (scrollY)="scrollY = $event" scrollYUnit="" [style.height]="scrollY + 'px'"
     (tabWidthChange)="tabWidthChange($event)">
    <nz-table
        #contentTb nzBordered
        [nzScroll]="{y: scrollY + 'px'}"
        [nzFrontPagination]="true"
        [nzShowPagination]="true"
        [nzData]="showApiList || []"
        [nzPageSize]="10"
        nzSize="small"
        (nzCurrentPageDataChange)="currentPageDataChange($event)">
        <thead (nzSortChange)="sortChange($event)" nzSingleSort>
        <tr>
            <th nzWidth="40px" nzShowCheckbox
                [(nzChecked)]="allChecked"
                [nzIndeterminate]="indeterminate"
                [nzDisabled]="!displayData.length || state===2"
                (nzCheckedChange)="checkAll($event)">
            </th>
            <th nzWidth="120px">服务名称</th>
            <th nzWidth="80px" nzAlign="center">方法</th>
            <th nzWidth="200px">路径</th>
            <th nzWidth="80px" nzAlign="center">状态</th>
            <th nzWidth="90px" nzAlign="center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of contentTb.data">
            <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="checkedChange(item)" [nzDisabled]="item.state===2"></td>
            <td>{{item?.alias}}</td>
            <td nzAlign="center" [ngClass]="{'_get':item.method==='GET','_post':item.method==='POST','_delete':item.method==='DELETE',
                '_put':item.method==='PUT','_head':item.method==='HEAD','_patch':item.method==='PATCH',
                '_options':item.method==='OPTIONS','_trace':item.method==='TRACE'}">
                {{item?.method}}</td>
            <td>{{item?.memo}}</td>
            <td nzAlign="center">
                <ng-container [ngSwitch]="item.state">
                    <ng-container *ngSwitchCase="0">可导入</ng-container>
                    <ng-container *ngSwitchCase="1">可更新</ng-container>
                    <ng-container *ngSwitchCase="2">已存在</ng-container>
                </ng-container>
            </td>
            <td nzAlign="center">
                <button nz-button nzType="link" nz-popconfirm nzPlacement="left" nzTitle="您确认要删除吗?"
                        (nzOnConfirm)="deleteItem(item)">删除</button>
            </td>
        </tr>
        </tbody>
    </nz-table>
</div>
